<template>
  <div>
    <button @click="count1 += 1">{{ count1 }}</button>
    &nbsp;+&nbsp;
    <button @click="count2 += 1">{{ count2 }}</button>
    &nbsp;=&nbsp;
    <span>{{ computedProp }}</span>
  </div>
</template>

<script>
import { computed, ref } from "@vue/composition-api";
export default {
  setup() {
    /** computed() 用来创建计算属性,computed函数的返回值是一个ref的实例*/
    const count1 = ref(1);
    const count2 = ref(1);

    const computedProp = computed(() => count1.value + count2.value);

    console.log(computedProp.value);

    /** 报错↓↓ 默认是不能直接给computed属性赋值的*/
    // plusOne.value++; // vue.runtime.esm.js?2b0e:619 [Vue warn]: Computed property was assigned to but it has no setter.

    return {
      count1,
      count2,
      computedProp
    };
  }
};
</script>

<style scoped></style>
